<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery.min.js"></script>
    <script src="https://static.geetest.com/static/tools/gt.js"></script>
    <title>申报者登录</title>
    @include('common-css')
    <style>
        a {
            text-decoration: none;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        body {
            background: url(/images/bg-buildings.jpg) bottom center no-repeat;
        }

        .content {
            width: 100%;
            margin: 0 auto;
            position: relative;
            box-sizing: border-box;
            height: 100%;
        }

        h1 {
            margin-top: 30px;
            color: #10479e;
            font-family: serif;
            font-size: 36px;
            font-weight: bold;
            text-align: center;
        }

        h2 {
            margin-top: 20px;
            color: #10479e;
            font-size: 30px;
            font-weight: bold;
            text-align: center;
        }

        .browser-requirement {
            color: #888;
            margin-top: 30px;
            font-size: 12px;
            text-align: center;
        }

        .browser-requirement a {
            color: #888;
        }

        .login_box {
            width: 380px;
            background: #fff;
            box-sizing: border-box;
            margin: 20px auto 0;
            border-radius: 5px;
            box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;
        }

        .login_title {
            width: 100%;
            text-align: center;
            line-height: 60px;
            height: 60px;
            font-size: 22px;
            font-weight: 600;
            color: #555;
        }

        .login_input_container {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 0 20px 20px;
        }

        .input_box {
            width: 100%;
            height: 40px;
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .input_box > input {
            width: 100%;
            height: 100%;
            outline: none;
            border: 1px solid #ccc;
            box-sizing: border-box;
            padding: 6px 12px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07) inset;
            transition: all ease-in-out 0.15s;
        }

        .input_box.special {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .input_box.special > input {
            width: 50%;
        }

        .input_box.special > img {
            width: 35%;
            height: 100%;
            cursor: pointer;
            display: block;
        }

        .input_box > input:focus {
            border-color: #66afe9;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
            0 0 8px rgba(102, 175, 233, .6);
        }

        .btn_box button {
            width: 100%;
            height: 40px;
            margin-bottom: 15px;
        }

        .label_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 40px;
        }

        .label_box .label {
            color: #1890ff;
            font-size: 14px;
            text-decoration: none;
            cursor: pointer;
        }

        .label_box .label:hover {
            color: #4a90e2;
        }

        .input_box > .captcha {
            width: 210px;
        }

        .captcha_box {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>
<body>

<div class="content">

    <h1>{{ config('vars.full_sys_name') }}</h1>
    <h2>申报入口</h2>
    {{--<h2 style="color: red;">系统将于7月31日晚19:00-24:00进行升级改造，该时间段内请勿使用系统填报项目！</h2>--}}
    <p class="browser-requirement">
        请使用 Chrome 浏览器(<a href="https://www.google.cn/intl/zh-CN/chrome/"
                                                     target="_blank">点击下载安装包</a>)
        或 360 浏览器极速模式 (<a href="https://dl.360safe.com/se/360se_setup.exe"
                                                               target="_blank">点击下载安装包</a>) 访问本系统
    </p>

    <div class="login_box" id="app"></div>
    @include('footer')

</div>

</body>
</html>
<script id="appTemplate" type="x-template">

    @if(true)
    <div class="login_box" v-cloak>
        <div class="login_title">申报者登录</div>
        <div class="login_input_container">
            <div class="input_box">
                <a-input type="text" placeholder="用户名" size="large" v-model="inputInfo.username" ref="usernameInput">
                    <a-icon slot="prefix" type="user"/>
                </a-input>
            </div>
            <div class="input_box">
                <a-input type="password" placeholder="密码" size="large" maxlength="16" v-model="inputInfo.password"
                         @keyup.enter="submitLogin">
                    <a-icon slot="prefix" type="lock"/>
                </a-input>
            </div>
            <div class="input_box captcha_box" v-if="countOfLoginError >=3">
                <a-input class="captcha" type="text" placeholder="验证码" size="large" maxlength="4"
                         v-model="inputInfo.code"
                         @keyup.enter="submitLogin">
                    <a-icon slot="prefix" type="code"/>
                </a-input>
                <img class="img-captcha" :src="'{{URL(captcha_src())}}'+'&now_time='+random" @click="refreshCode" alt="点击刷新">
            </div>
            <div class="btn_box">
                <a-button type="primary" @click="submitLogin" :disabled="isSending">登 录</a-button>
            </div>
            <div class="btn_box">
                <a-button style="color: #1890ff; border-color: #1890ff;" type="default" @click="register">注册为申报者
                </a-button>
            </div>
            <div class="label_box">
                <a href="/">返回上一页</a>
                <!--@time 2020-06-15 <a href="/review/login">评审专家登录</a>-->
                <!-- <div class="label" @click="forget">忘记密码</div> -->
            </div>
        </div>
    </div>
    @else
    <p style="font-size: 20px; margin-top: 70px; width: 100%; text-align: center; color: darkgray;">申报已结束</p>
    @endif

</script>
@include('common-js')
<script>
    let countOfLoginError = {!! $countOfLoginError!!};
    console.log('错误次数', countOfLoginError)
    Vue.prototype.$axios = axios
    var app = new Vue({
        el: '#app',
        template: '#appTemplate',
        data: {
            countOfLoginError: countOfLoginError,
            random: Math.random() * 1000,
            isSending: false,
            inputInfo: {
                username: '',
                password: '',
                code: '',
            },
            imgSrc: '',//验证码地址
        },
        mounted() {
            this.$refs.usernameInput.$refs.input.focus()
        },
        methods: {
            refreshCode() {
                this.random = Math.random() * 1000
            },
            // 点击去注册
            register() {
                window.location.href = "/apply/register"
            },
            // 点击登录
            submitLogin() {
                this.$message.destroy()
                if (this.isSending) return
                let {username, password, code} = this.inputInfo
                if (!username) return this.$message.error("请填写用户名")
                if (!password) return this.$message.error("请填写密码")
                let needCode = false
                if (this.countOfLoginError >= 3) {
                    if (!code) return this.$message.error("请填写验证码")
                    needCode = true
                }
                let encryptedText = encrypt.encrypt(password)
                this.isSending = true
                this.$message.loading('正在登录...', 0)
                this.$axios.post("/api/auth/user-login", {
                    username,
                    password: encryptedText,
                    code,
                    needCode,
                    role: 'applicant'
                }).then(res => {
                    console.log(res)
                    this.$message.destroy()
                    if (res.data.ok) {
                        location = res.data.redirect_to
                    } else {
                        if (res.data.count_of_login_error) {
                            this.countOfLoginError = res.data.count_of_login_error
                        }
                        this.$message.error(res.data.message)
                        this.refreshCode()
                        this.$message.destroy()
                    }
                    this.isSending = false
                    return false
                })

            },
            // 忘记密码
            forget() {

            }
        },
        created() {
            this.$message.config({
                top: `24px`,
                duration: 2,
                maxCount: 1,
            });
        },
    })
</script>